<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .showContainer {
            width: 520px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            border: 1px solid;
            overflow: hidden;
        }

        .container {
            width: 2600px;
            height: 280px;
            position: absolute;
            left: 0;
        }

        .container img {
            float: left;
        }
    </style>
</head>

<body>
    <div class="showContainer">
        <div class="container">
            <img src="./imgs/1t.png" alt=""><img src="./imgs/2t.png" alt=""><img src="./imgs/3t.png" alt=""><img
                src="./imgs/4t.png" alt=""><img src="./imgs/5t.png" alt="">
        </div>
    </div>
    <script>
        // 轮播图的运动 就是 container 容器的运动 ，让container 向左边移动就可以了；

        var containerEle = document.querySelector(".container");

        var index = 0;  // 图片所在的位置索引值；
        /* 
            0   ----》 -520 
            1  -----》 -1040
            2 ----》 1560
            n ----》(n+1)*-520;
        
        */

        setInterval(function () {
            move(containerEle, "left", -520*(index+1), function () {
                index++;
                console.log("运动结束",index);
               
                if(index==4){
                    containerEle.style.left = "0px";
                    index = 0;
                }
            })
        }, 2000);  // 间隔时间需要大于 动画完成的事件






        function move(boxEle, dir, target, cb) {
            var timer = setInterval(function () {
                // 获取当前box的left值
                var num3 = parseInt(getComputedStyle(boxEle)[dir]);
                // 当前方块所在的位置 和 目标位置比较
                num3 += 5 * (target > num3 ? 1 : -1);
                boxEle.style[dir] = num3 + "px";
                // 假定 运动 500的时候开始向下移动；
                if (num3 == target) {
                    clearInterval(timer);
                    // console.log("停止了");
                    cb();
                }
            }, 5);
        }
    </script>
</body>

</html>